<template>
    <div class="editProfile">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>{{language.editProfile_title}}</span>
            </span>
            <span class="right" :class="{rightActive: checkOk}" @click="submit">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <ul class="editL">
                <li>
                    {{language.unify_birthday}}
                    <div class="ageTxt">{{birthdayStr}}</div>
                    <input v-model="birthday" class="editAge" type="date" />
                </li>
                <li>
                    {{language.unify_country}}
                    <select v-model="country" ref="country">
                        <option v-for="item in countryList" :value="item.value">{{item.label}}</option>
                    </select>
                </li>
                <li v-if="showZip">
                    {{language.unify_zipCode}}
                    <input v-model="zip" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" />
                </li>
                <template v-else>
                    <li v-if="showState">
                        {{language.unify_state}}
                        <select v-model="state">
                            <option v-for="item in stateList" :value="item.value">{{item.label}}</option>
                        </select>
                    </li>
                    <li>
                        {{language.unify_city}}
                        <input v-model="city" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" />
                    </li>
                </template>
            </ul>
        </div>
        <loading :props="{type:'page' ,show:loadingAjax}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api';
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'editProfile',

    components: {
        loading,
        publicDialog
    },

    data: function() {
        return {
            loadingAjax: false,
            checkOk: false,
            countryList: {},
            stateList: {},
            country: 0,
            state: '',
            zip: '',
            showState: false,
            showZip: false,
            showDefault: true,
            birthday: '',
            city: '',
            dialogData: {},
        }
    },

    created() {
        this.getCountryList();
    },

    activated() {
        let userInfo = this.$store.state.user.userInfo;
        this.showDefault = this.country == userInfo.account.country ? false : true;
        this.country = userInfo.account.country;
        if ([0, 31, 180].indexOf(parseInt(userInfo.account.country)) > -1) {
            this.showZip = true;
            this.zip = userInfo.account.zip;
            this.state = '';
            this.city = '';
        } else {
            this.zip = '';
            this.state = userInfo.account.state;
            this.city = userInfo.account.city;
        }
        this.birthday = [userInfo.detail.basics.age_year, userInfo.detail.basics.age_month >= 10 ? userInfo.detail.basics.age_month : '0' + userInfo.detail.basics.age_month, userInfo.detail.basics.age_day >= 10 ? userInfo.detail.basics.age_day : '0' + userInfo.detail.basics.age_day].join('-');
    },

    watch: {
        country: function(newVal, oldVal) {
            if (!this.showDefault) {
                this.state = '';
                this.zip = '';
                this.city = '';
            }
            this.showState = false;
            let tthis = this;
            if ([0, 31, 180].indexOf(parseInt(newVal)) > -1) {
                this.showZip = true;
            } else {
                this.showZip = false;
                API.get_state_list({
                    data: newVal,
                    success: function(result) {
                        tthis.showState = result.length > 0 ? true : false;
                        tthis.stateList = [{
                            value: '',
                            label: 'Anywhere'
                        }].concat(result);
                    }
                })
            }

        },
    },

    computed: {
        birthdayStr() {
            let monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                date = this.birthday.split('-'),
                year = date[0],
                month = Number(date[1]),
                day = date[2];
            month = monthArr[month - 1];
            return month + ' ' + day + ', ' + year;
        }
    },

    beforeUpdate() {
        this.checkOk = this.checkAll() ? true : false;
    },

    methods: {
        getCountryList() {
            let tthis = this,
                data = JSON.parse(Unit.getLocalStorage('ms_country_list')) || {};
            if (_.isEmpty(data)) {
                API.get_country_list({
                    success: function(result) {
                        Unit.setLocalStorage('ms_country_list', JSON.stringify(result));
                        tthis.countryList = result;
                    }
                });
            } else {
                tthis.countryList = data;
            }
        },

        checkAll() {
            let birthdayArr = this.birthday.split('-'),
                age = parseInt(new Date().getFullYear()) - parseInt(birthdayArr[0]);
            if (age < 18 || age > 99) {
                return false;
            }
            if (this.showState && this.state == '') {
                return false;
            }

            if (this.showZip && this.zip == '') {
                return false;
            }
            return true;
        },

        submit() {
            let tthis = this;
            if (tthis.checkOk) {
                tthis.loadingAjax = true;
                let obj = {},
                    date = new Date(tthis.birthday),
                    userInfo = Unit.getObjSessionStorage('ms_myself'),
                    data = {
                        age_year: date.getFullYear(),
                        age_month: date.getMonth() + 1,
                        age_day: date.getDate(),
                        r_zip: tthis.zip,
                        r_country: tthis.country,
                        r_state_id: tthis.state,
                        r_city: tthis.city
                    };
                obj.data = data;
                obj.processData = function(result) {
                    if (result.errs) {
                        tthis.dialogData = {
                            position: 'top',
                            type: 'error',
                            content: {
                                info: result.errs[0].errmsg,
                            }
                        };
                        return;
                    } else {
                        userInfo.detail.basics.age_day = result.data.age_day;
                        userInfo.detail.basics.age_month = result.data.age_month;
                        userInfo.detail.basics.age_year = result.data.age_year;
                        userInfo.account.zip = result.data.r_zip;
                        userInfo.account.age = result.data.age;
                        userInfo.account.country = result.data.r_country;
                        userInfo.account.country_name = tthis.$refs.country.options[tthis.$refs.country.selectedIndex].text;
                        userInfo.account.city = result.data.r_city;
                        userInfo.account.state = result.data.r_state_id;
                        userInfo.account.state_name = result.data.r_state;
                        tthis.$router.push({ 'name': 'me' });
                        return userInfo;
                    }
                };
                obj.callback = function() {
                    setTimeout(function() {
                        tthis.$router.push({
                            name: 'me'
                        });
                    }, 500)
                }
                obj.complete = function(data) {
                    tthis.loadingAjax = false;
                }

                tthis.$store.dispatch('user_updateProfile', obj);
            }
        }
    }
}

</script>
<style scoped>
.editProfile {
    background: #fff;
    padding: 44px 0 51px 0;
}

.editProfile .editL {
    overflow: hidden;
}

.editProfile .editL li {
    padding: 10px 0;
    min-height: 30px;
    position: relative;
    border-bottom: 1px dashed #dcdfe3;
    text-indent: 15px;
    font-size: 13px;
    line-height: 30px;
    color: #000;
}

.editProfile .editL li:last-child {
    border-bottom: 0;
}

.editProfile .editL .editAge {
    padding: 0;
    margin: 0;
    background: none;
    text-align: right;
    font-family: Helvetica, Tahoma, Arial;
    width: 100px;
    height: 100%;
    overflow: hidden;
    font-size: 60px;
    opacity: 0;
    color: #878385;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 1;
}

.editProfile .editL .ageTxt {
    line-height: 30px;
    position: absolute;
    right: 15px;
    top: 15px;
    color: #878385;
    text-align: right;
    font-size: 13px;
}

.editProfile .editL select {
    width: 70%;
    display: block;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    direction: rtl;
    font-size: 13px;
    color: #878385;
    background-color: #fff;
}

.editProfile .editL input[type=text] {
    height: 30px;
    width: 70%;
    border: 0px;
    text-align: right;
    font: normal normal normal normal 13.3333px/normal Arial;
    font-size: 13px;
    line-height: 30px;
    background: #fff;
    color: #878385;
    position: absolute;
    right: 15px;
    top: 15px;
}

</style>
